<?php 
$chip = new Chip();
$chip = $chip->get(Session::get('chip_id'));

$visited_pages = unserialize($chip->visited_pages);

if($visited_pages['plattegrond'] == 0):
	$visited_pages['plattegrond'] = 1;
	$chip->visited_pages = serialize($visited_pages);
	$chip->save();
?>
	<script>
	$(function() {
		$("#info-form").dialog( "option", "width", 500 );
		$("#info-form").dialog("open");
	});
	</script>
	<div id="info-form" title="Uitleg over de plattegrond">
		<p>Op de plattegrond zie je alle attracties, toiletten, snoepwinkels en meer! Je ziet jezelf als een rood poppetje op de plattegrond en je bekenden als blauw poppetje. Klik op een icoon of attractie op de plattegrond om deze te openen en een route te maken.
		<br />
		<br />
		Druk op de grote knoppen onderaan het scherm om te zien waar je ze kunt vinden op de plattegrond.</p>
	</div>
<? endif; ?>



<div class="row">
	<div class="twelvecol box red last">
		<div class="outer_wrapper rounded">
			<div class="wrapper">
				<div class="top_nav">
					<button class="twocol" onClick="javascript: history.go(-1)">Terug</button>
					<h2>Plattegrond</h2>
				</div>
			</div>
		</div>
	</div>

	<style>

.box.brown{
	background: #eedbb1;
}

.filters{
	background: #fff;
	position: absolute;
	z-index: 99999;
}

.filters .icon{
	width: 12.5%;
	float: left;
	padding: 5px 0;
	text-align: center;
	
	background: #eed8b1;
	
	
-webkit-box-shadow: inset -1px -1px 0px 0px #8d6625;
box-shadow: inset -1px -1px 0px 0px #8d6625;

}

.filters .icon.active{
	background-image: linear-gradient(bottom, rgb(185,153,102) 27%, rgb(238,216,169) 64%);
	background-image: -o-linear-gradient(bottom, rgb(185,153,102) 27%, rgb(238,216,169) 64%);
	background-image: -moz-linear-gradient(bottom, rgb(185,153,102) 27%, rgb(238,216,169) 64%);
	background-image: -webkit-linear-gradient(bottom, rgb(185,153,102) 27%, rgb(238,216,169) 64%);
	background-image: -ms-linear-gradient(bottom, rgb(185,153,102) 27%, rgb(238,216,169) 64%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.27, rgb(185,153,102)),
		color-stop(0.64, rgb(238,216,169))
	);
	
}

.filters .icon  img{
	display: block;
	margin: 5px auto 0 auto;
}
	</style>
	<div class="twelvecol" style="height: 100%; position: relative;">
		<div id="filterbox" class="filters twelvecol" style="position: absolute; bottom: 65px">
			<div id="attractie" class="icon active"><img src="<?php URL?>img/icons/attractie.gif" />Attractie</div>
			<div id="restaurant" class="icon active"><img src="<?php URL?>img/icons/restaurant.gif" />Restaurant</div>
			<div id="toilet" class="icon active"><img src="<?php URL?>img/icons/toilet.gif" />Toilet</div>
			<div id="terminal" class="icon active"><img src="<?php URL?>img/icons/terminal.gif" />Terminal</div>
			
			<div id="ehbo" class="icon active"><img src="<?php URL?>img/icons/ehbo.gif" />EHBO</div>
			<div id="snoepwinkel" class="icon active"><img src="<?php URL?>img/icons/snoepwinkel.gif" />Snoepwinkel</div>
			<div id="souvenirs" class="icon active"><img src="<?php URL?>img/icons/souvenirs.gif" />Souvenirs</div>
			<div id="bagagelockers" class="icon active" style="box-shadow: none"><img src="<?php URL?>img/icons/bagagelockers.gif" />Bagagekluis</div>		
		</div>
		<?php require("inc/googlemaps.php")?>
	</div>
</div>




